<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="getProductCustomerStatistics"
        :searchDefault="searchConditions"
        :pageSize="10"
        :showExpandFormFlag="true"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import { getProductCustomerStatistics, getList as getUserList } from '@/api/user';
import { getList as getProductList } from '@/api/product';
import TableList from '@/components/TableList/index';
export default {
  name: 'customer',
  props: {
    productIds: {
      type: [Array],
      default: ()=>{
        return []
      },
    },
  },
  components: {
    TableList,
  },
  computed:{
    searchConditions(){
      if(!this.$store.state.user.info.roles.includes('admin')){
        return {
          product_id: ['in', this.productIds],
          user_id: this.$store.state.user.info.id
        }
      } else {
        return {
          product_id: ['in', this.productIds],
        }
      }
    },
    tableDataColumn(){
      if( !this.$store.state.user.info.roles.includes('admin') ){
        return [
          {
            prop: 'product.product_search_field',
            searchName: 'product_id',
            label: '产品名称',
            minWidth: '180',
            searchAction: getProductList,
            searchKey: 'id',
            searchLabel: 'product_search_field',
            exact: true,
          },
          {
            prop: 'charge_number',
            searchName: 'charge_number',
            label: '计费数量',
            minWidth: '100',
            exact: true,
            showSummary: true
          },
          {
            prop: 'date',
            searchName: 'date',
            label: '日期',
            minWidth: '100',
            searchType: 'date',
            baseSeachColumn: true,
          },
        ]
      } else {
        return [
          {
            prop: 'id',
            searchName: 'id',
            label: 'ID',
            minWidth: '60',
            searchType: 'input',
            exact: true,
          },
          {
            prop: 'user.nick_name',
            searchName: 'user_id',
            label: '用户',
            minWidth: '120',
            searchType: 'remoteSelect',
            searchAction: getUserList,
            searchKey: 'id',
            searchLabel: 'nick_name',
            exact: true,
          },
          {
            prop: 'product.product_search_field',
            searchName: 'product_id',
            label: '产品名称',
            minWidth: '180',
            searchType: 'remoteSelect',
            searchAction: getProductList,
            searchKey: 'id',
            searchLabel: 'product_search_field',
            exact: true,
          },
          {
            prop: 'request_number',
            searchName: 'request_number',
            label: '请求数量',
            minWidth: '100',
            searchType: 'input',
            exact: true,
            showSummary: true
          },
          {
            prop: 'charge_number',
            searchName: 'charge_number',
            label: '计费数量',
            minWidth: '100',
            searchType: 'input',
            exact: true,
            showSummary: true
          },
          {
            prop: 'cost',
            searchName: 'cost',
            label: '计费',
            minWidth: '100',
            searchType: 'input',
            exact: true,
            showSummary: true
          },
          {
            prop: 'date',
            searchName: 'date',
            label: '日期',
            minWidth: '100',
            searchType: 'date',
          },
          {
            prop: 'created_at',
            searchName: 'created_at',
            label: '创建时间',
            minWidth: '180',
            searchType: 'dateTime',
          },
        ]
      }
    }
  },
  data() {
    return {
      getProductCustomerStatistics,
      getUserList,
      getProductList
    };
  },
};
</script>
